<#import "/spring.ftl" as spring /> <#import
"../layout/defaultLayout.ftl" as layout> <@layout.defaultLayout
styles=["bootstrap-table/bootstrap-table.min.css",
"bootstrap-validator/css/bootstrapValidator.css",
"bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css"]
scripts=["bootstrap-table/bootstrap-table.min.js",
"bootstrap-table/locale/bootstrap-table-zh-CN.min.js",
"bootstrap-validator/validator.js",
"jquery/serializejson/jquery.serializejson.min.js",
"util/jquery-dateFormat.min.js",
"bootstrap-table/extensions/export/bootstrap-table-export.min.js",
"bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js",
"bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js",
"bootstrap-table/extensions/editable/bootstrap-table-editable.js",
"x-editable/bootstrap3-editable/js/bootstrap-editable.js",
"bootstrap-validator/js/bootstrapValidator.js", "util/tableExport.js"]>


<div class="container-fluid"
	style="background-color: white; padding: 30px; width: 80%">
	<div class="row-fluid" style="padding-left: 10%; width: 90%">
		<div class="span12">

			<fieldset>
				<legend>
					<span class="glyphicon glyphicon-list-alt"></span>&nbsp;&nbsp;<@spring.message "config.legend"/>
				</legend>
				<div style="padding-left: 5%; padding-right: 5%">
					<form name="configForm" id="configForm" class="form-horizontal">
					<input type="text" name="reportId" id="reportId" hidden 
						<#if reportConfig ??> value="${reportConfig.id}"</#if> />
						<div class="form-group">
							<label for="name" class="col-sm-2 control-label"><@spring.message "report.name"/></label>
							<div class="col-sm-7">
								<#if reportConfig ??> <input type="text" name="name" id="name"
									value="${reportConfig.name}" class="form-control" /> <#else> <input
									type="text" name="name" class="form-control" id="name" />
								</#if>
							</div>
						</div>
						<div class="form-group">
							<label for="code" class="col-sm-2 control-label"><@spring.message "report.code"/></label>
							<div class="col-sm-7">
								<#if reportConfig ??><input type="text" class="form-control" 
									name="code" id="code" value="${reportConfig.code }" /> <#else>
								<input type="text" name="code" id="code" class="form-control" />
								</#if>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-2 control-label"><@spring.message "report.is_sum"/></label>
							<div class="col-sm-7">
								<div class="form-control" style="border: none;">
									<#if reportConfig ??> 
										<input type="radio" name="isSum" value="1"
										<#if reportConfig.isSum=="1" > checked="checked" </#if>/>&nbsp;<@spring.message "checkbox.yes"/>&nbsp;&nbsp;
									<input type="radio" name="isSum" value="0"
									<#if reportConfig.isSum=="0" > checked="checked" </#if>/>&nbsp;<@spring.message "checkbox.no"/>
									<#else>
									<input type="radio"  name="isSum" value="1" />&nbsp;<@spring.message "checkbox.yes"/>&nbsp;&nbsp;
									<input type="radio" name="isSum" value="0" checked="checked"/>&nbsp;<@spring.message "checkbox.no"/></#if>
								</div>
							</div>
						</div>
						<div class="form-group">
							<!--  101 曲线图 102 柱状图  103饼状图 -->
							<label class="col-sm-2 control-label"><@spring.message "chart.type"/></label>

							<div class="col-sm-7">
								<div class="form-control" style="border: none;">
									<#if reportSubs ??> <input type="checkbox" name="reportType"
										value="101|$|曲线图"<#list reportSubs as reportSub> <#if
									reportSub.type=="101">checked="checked"</#if>
									</#list>/>&nbsp;<@spring.message "chart.lineChart"/>&nbsp;&nbsp; <input type="checkbox"
										name="reportType" value="102|$|柱状图"<#list reportSubs
									as reportSub> <#if
									reportSub.type=="102">checked="checked"</#if>
									</#list>/>&nbsp;<@spring.message "chart.barChart"/>&nbsp;&nbsp; <input type="checkbox"
										name="reportType" value="103|$|饼状图"<#list reportSubs
									as reportSub> <#if
									reportSub.type=="103">checked="checked"</#if>
									</#list>/>&nbsp;<@spring.message "chart.pieChart"/>&nbsp;&nbsp; <#else> <input type="checkbox"
										name="reportType" value="101|$|曲线图" />&nbsp;<@spring.message "chart.lineChart"/>&nbsp;&nbsp; <input
										type="checkbox" name="reportType" value="102|$|柱状图" />&nbsp;<@spring.message "chart.barChart"/>&nbsp;&nbsp;
									<input type="checkbox" name="reportType" value="103|$|饼状图" />&nbsp;<@spring.message "chart.pieChart"/>&nbsp;&nbsp;

									</#if>
								</div>
							</div>
						</div>
						<br>
						<div class="form-group">
							<label class="col-sm-2 control-label"><@spring.message "config.sql"/></label>
							<div class="col-sm-7">
								<div style="text-align: left; width: 100%;">
								<!-- onblur="textAreaFocus();" onkeyup="textAreaFocus();"
										onfocus="textAreaFocus();"  -->
									<textarea name="sql" id="sql" rows="10" class="form-control"
										style="width: 100%; resize: none;"><#if reportConfig ?? && reportConfig.sql ?? >${reportConfig.sql}</#if></textarea>
								</div>
							</div>
						</div>
					</form>
					<div style="text-align: right; width: 100%;">
						<button id="check" class="btn btn-success" style="width: 100px;"><@spring.message "report.validate"/></button>
						<button id="cancel" class="btn btn-success" style="width: 100px;"><@spring.message "report.cancel"/></button>
						<button id="submit" class="btn btn-success" style="width: 100px;"><@spring.message "report.nextStep"/></button>
					</div>
				</div>
			</fieldset>

		</div>
	</div>

</div>
<script type="text/javascript">
<!--
	//-->
	var url = window.location.href;
	var nameIsRight = false;
	var codeIsRight = false;
	var sqlIsRight = false;
	//var lastStr = url.substring(url.lastIndexOf('/') + 1, url.length);
	var isEdit = false;
	var reportId = $("#reportId").val();
	if (reportId != false) {
		$("#code").attr("disabled","disabled");
		isEdit = true;
		nameIsRight = true;
		codeIsRight = true;
		sqlIsRight = true;
	}

	$("#check").click(function() {
		$('#configForm').data('bootstrapValidator').validate();
		//alert($('#configForm').data('bootstrapValidator').isValid());
		
	});
	$("#cancel").click(function() {
		history.back(-1);
	});

	function toNext(report_id) {
		location.href = "/report/configure/preview/" + report_id;
	}

	//表单数据提交函数
	$("#submit").click(function() {
		$('#configForm').data('bootstrapValidator').validate();
		if (!$('#configForm').data('bootstrapValidator').isValid()) {
			return;
		}
		var obj = $("#configForm").serializeJson()
		var jsonString = JSON.stringify(obj);
		if (isEdit) {
			$.ajax({
				url : '/report/config/updateConfig/' + reportId,
				type : 'post',
				contentType : 'application/json',
				data : jsonString,
				dataType : 'json',
				success : function(data) {
					//alert(data);
					if (data.code == '000') {
						toNext(data.detail.report.id);
					} else {
						alert("<@spring.message 'msg.editFail'/>");
					}
				}
			});
		} else {
			$.ajax({
				url : '/report/config/addConfig',
				type : 'post',
				contentType : 'application/json',
				data : jsonString,
				dataType : 'json',
				success : function(data) {
					if (data.code == '000') {
						toNext(data.detail.report.id);
					} else {
						alert("<@spring.message 'msg.addFail'/>");
					}
				}
			});
		}

	});

	//改进封装，使序列化表单支持多选框
	(function($) {
		$.fn.serializeJson = function() {
			var serializeObj = {};
			var array = this.serializeArray();
			var str = this.serialize();
			$(array).each(
					function() {
						if (serializeObj[this.name]) {
							if ($.isArray(serializeObj[this.name])) {
								serializeObj[this.name].push(this.value);
							} else {
								serializeObj[this.name] = [
										serializeObj[this.name], this.value ];
							}
						} else {
							serializeObj[this.name] = this.value;
						}
					});
			return serializeObj;
		};
	})(jQuery);

	/* function textAreaFocus() {
		//验证sql正确性
		var $parent = $('#sql').parent();
		if ($('#sql').val() == "") {
			$parent.find(".formtips").remove();
			sqlIsRight = false;
			$parent
					.append('<span class="formtips onError"><span class="glyphicon glyphicon-remove"/></span>');
		} else {
			$
					.ajax({
						url : '/report/config/checkSql',
						type : 'post',
						contentType : 'application/text',
						data : $('#sql').val(),
						dataType : 'json',
						success : function(data) {
							if (data.code == '000') {
								sqlIsRight = true;
								$parent.find(".formtips").remove();
								$parent
										.append('<span class="formtips onSuccess"><span class="glyphicon glyphicon-ok"/></span>');
							} else {
								sqlIsRight = false;
								$parent.find(".formtips").remove();
								$parent
										.append('<span class="formtips onSuccess"><span class="glyphicon glyphicon-remove"/>sql格式错误</span>');
							}

						}
					});

		}
	} */
/* 
	$(function() {
		//如果是必填的，则加红星标识.
		$("form :input.required").each(function() {
			var $required = $("<strong>*</strong>"); //创建元素
			$(this).parent().append($required); //然后将它追加到文档中
		});

		//文本框失去焦点后
		$('form :input')
				.blur(
						function() {
							var $parent = $(this).parent();
							if ($(this).is('#name') || $(this).is('#code')) {
								$parent.find(".formtips").remove();
							}
							//验证用户名
							if ($(this).is('#name')) {
								if (this.value == "") {
									nameIsRight = false;
									$parent
											.append('<span class="formtips onError"><span class="glyphicon glyphicon-remove"/>	</span>');
								} else {
									nameIsRight = true;
									$parent
											.append('<span class="formtips onSuccess"><span class="glyphicon glyphicon-ok"/></span>');
								}
							}
							//验证code唯一性
							if ($(this).is('#code')) {
								if (this.value == "") {
									codeIsRight = false;
									$parent
											.append('<span class="formtips onError"><span class="glyphicon glyphicon-remove"/>	</span>');

								} else {
									var json = {};
									json.code = this.value;
									if (isEdit) {
										json.type = "edit";
										json.id = reportId;
									} else {
										json.type = "add";
									}
									var jsonString = JSON.stringify(json);
									$
											.ajax({
												url : '/report/config/checkConfigCodeUnique',
												type : 'post',
												contentType : 'application/json',
												data : jsonString,
												dataType : 'json',
												success : function(data) {
													if (data.code == '000') {
														codeIsRight = true;
														$parent
																.append('<span class="formtips onSuccess"><span class="glyphicon glyphicon-ok"/>	</span>');

													} else {
														codeIsRight = false;
														$parent
																.append('<span class="formtips onError"><span class="glyphicon glyphicon-remove"/>编码已存在</span>');

													}
												}
											});

								}
							}

						}).keyup(function() {
					$(this).triggerHandler("blur");
				}).focus(function() {
					$(this).triggerHandler("blur");
				});//end blur 
	}); */
	
	
	//表单校验
	$(function(){
        $('#configForm').bootstrapValidator({
　　　　　　　	message: 'This value is not valid',
            feedbackIcons: {
                　　　　　　　　valid: 'glyphicon glyphicon-ok',
                　　　　　　　　invalid: 'glyphicon glyphicon-remove',
                　　　　　　　　validating: 'glyphicon glyphicon-refresh'
            　　　　　　　　   },
            fields: {
                name: {
                    validators: {
                        notEmpty: {
                            message: "<@spring.message 'msg.reportNameNotNull' />"
                        }
                    }
                },
                code: {
                    validators: {
                        notEmpty: {
                            message: "<@spring.message 'msg.reportCodeNotNull' />"
                        },
                        remote:{
                         	 url: '/report/config/checkConfigCodeUnique',//验证地址
                         	 message: "<@spring.message 'msg.reportCodeExited' />",//提示消息
                             delay :  2000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
                             type: 'POST',//请求方式
                             contentType:'application/json',
                             dataType : 'json',
                             //自定义提交数据，默认值提交当前input value
                             data:function(){
                            	var json = {};
     							json.code = $('#code').val();
     							if (isEdit) {
     								json.type = "edit";
     								json.id = reportId;
     							} else {
     								json.type = "add";
     							}
     							var jsonString = JSON.stringify(json);
                            	return jsonString;
                             }
                                 
                         }
               
                   },
                },
                sql: {
                    validators: {
                        notEmpty: {
                            message: "<@spring.message 'msg.sqlCannotEmpty' />"
                        },
               		remote:{
            			url: '/report/config/checkSql',//验证地址
            			message: "<@spring.message 'msg.sqlFormatWrong' />",//提示消息
                		delay :  2000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
                		type: 'POST',//请求方式
                		contentType:'application/json',
                        dataType : 'json',
                		//自定义提交数据，默认值提交当前input value
                		data:function(){
                			var json = {};
                			json.sql=$('#sql').val();
               				return JSON.stringify(json);
               			}
            		}
                   }
                }
            }
        });
	});
</script>
</@layout.defaultLayout>
